<template>
    <h1>添加轮播图页面</h1>
    <el-form :model="form" label-width="120px">
        <el-form-item label="图片链接信息" label-width="120px">
            <el-input v-model="form.link" />
        </el-form-item>

        <el-form-item label="图片提示信息">
            <el-input v-model="form.alt" />
        </el-form-item>

        <el-form-item label="选择图片">
            <el-upload
                :http-request="httpRequest"
                class="avatar-uploader"
                :show-file-list="false"
            >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
        </el-form-item>
    </el-form>

    <el-button @click="fileUpdate">上传图片</el-button>
</template>

<script>
import { Plus } from "@element-plus/icons-vue";
import { addBanner } from "@/api/banner";
import { ElMessage } from "element-plus";
import { myMessage } from "@/utils";

export default {
    data() {
        return {
            form: {
                link: "",
                alt: "",
                img: "",
            },
            imageUrl: "",
        };
    },
    methods: {
        async fileUpdate() {
            console.log("提交数据", this.form);
            const res = await addBanner(this.form);

            myMessage(res.code, res.message, () => {
                this.form = {
                    link: "",
                    alt: "",
                    img: "",
                };

                this.imageUrl = "";
            });
        },
        httpRequest(options) {
            // console.log('您选择了一张图片', options)

            // 当前函数的第一个形参 options 是一个对象, 对象中的 file 是我们的 图片信息
            // 但是当前的图片信息传递给后端没有用, 需要我们前端将图片转换为 base64 格式的字符串, 然后传递给后端

            // console.log(options.file)

            // 1. 创建一个文件加载器, 一会用于将我们的 图片信息转换格式
            const reader = new FileReader();

            // 2. 指定需要加载的文件
            reader.readAsDataURL(options.file);

            const that = this;

            // 3. 加载文件需要一定的时间才能执行完毕, 所以我们需要书写一个 监听加载完毕 的事件
            reader.onload = function () {
                // 当前函数执行的时候, 文件已经被处理完毕了

                // console.log(reader.result)

                that.form.img = reader.result;

                that.imageUrl = reader.result;
            };
        },
    },
    components: {
        Plus,
    },
};
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-input {
    width: 500px;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
